<template>
  <div id="groupBack">
    <div style="padding: 10px 0">
      <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
      <!--            <el-button class="ml-5" style="background-color:#42b983;color: #FFFFFF" @click="load">搜索</el-button>-->
      <!--            <el-button style="background-color:#4198b9;color: #FFFFFF" @click="reset">重置</el-button>-->
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" >重置</el-button>
      <el-select style="margin-left: 450px" v-model="value" placeholder="请选择问卷类型">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.label"
            :value="[item.label,item.id]">
        </el-option>
      </el-select>
    </div>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
            <img src="@/assets/img_1.png" class="image">
          <el-row>
            <h3>
              疫情
            </h3>
            <div style="color: #9F9F9F">
              国家疫情上报问卷 本问卷主要实现健康码以及个人体温信息
              <el-button type="text" class="button" @click="click0">立即答题</el-button>
            </div>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="always">
          <img src="@/assets/img_3.png" class="image">
          <el-row>
            <h3>
              考试
            </h3>
            <div style="color: #9F9F9F">
              作为线上考试模板，提供主观题、客观题，可以查看最终的结果等等
              <el-button type="text" class="button" @click="click0">立即答题</el-button>
            </div>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="always">
          <img src="@/assets/img_2.png" class="image">
          <el-row>
            <h3>
              性格
            </h3>
            <div style="color: #9F9F9F">
              测试你的内向性格,本测试主要起到测试性格的作用。。。。。
              <el-button type="text" class="button" @click="click0">立即答题</el-button>
            </div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>



<script>
export default {
  name: "DoQuestionnaire",
  data() {
    return {
      currentDate: new Date(),
     options: [{//身份选择
       id: '1',
       label: '管理员'
     }, {
       id: '2',
       label: '租户'
     }, {
       id: '3',
       label: '用户'
     }, {
       id: '4',
       label: '答者'
     }],
         value: ''
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {

    },
    click0(){
      window.open("http://localhost:8080/previewQuestionnaire.html?id=1477005314&eORp=1")//id改成问卷id
    },
    click1(){
      window.open("http://localhost:8080/previewQuestionnaire.html?id=1477005314&eORp=1")
    },
    click3(){
      window.open("http://localhost:8080/previewQuestionnaire.html?id=1477005314&eORp=1")
    }
  }
}
</script>

<style scoped>

.title-dj{

}

.el-col{
  margin-top: 20px;
}
.image{
  width: 100%;
  height: 180px;
}
.button {
  padding: 0;
  float: right;
}
.el-col{
  width: 20%;
}
button.noselect svg {
  width: 10px;
  fill: #eee;
}

button:focus {
  outline: none;
}

button:active .icon svg {
  transform: scale(0.8);
}

button.edit svg {
  width: 10px;
}

button.query svg {
  width: 10px;
}

</style>